<template>
  <div class="restaurant-detail-page">
    <el-container direction="vertical">
      <el-header>
        <h2>{{ restaurant.name }}</h2>
        <el-rate v-model="restaurant.rating" disabled></el-rate>
      </el-header>
      <el-main>
        <img :src="restaurant.image" alt="restaurant main image" class="restaurant-image"/>
        <div class="menu-items">
          <h3>菜单</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="dish in restaurant.menu" :key="dish.id">
              <el-card>
                <img :src="dish.image" alt="dish image" class="dish-image"/>
                <h4>{{ dish.name }}</h4>
                <p>价格: ￥{{ dish.price }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer>
        <el-button type="primary">发表评论</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'RestaurantPage',
  data() {
    return {
      restaurant: {
        name: '美食餐厅A',
        image: 'path/to/restaurant-image.jpg',
        rating: 4.5,
        menu: [
          { id: 1, name: '菜品A', price: 50, image: 'path/to/dish1.jpg' },
          { id: 2, name: '菜品B', price: 80, image: 'path/to/dish2.jpg' },
          { id: 3, name: '菜品C', price: 60, image: 'path/to/dish3.jpg' }
        ]
      }
    };
  }
};
</script>

<style scoped>
.restaurant-image {
  width: 100%;
  height: auto;
}
.dish-image {
  width: 100%;
  height: auto;
}
</style>
